<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for 错误用法</title>
</head>
<body>
<div id="app">
    <div v-for="(item, index) in contents">{{ item}}</div>

    <div v-for="(item, index) in contents" v-for="url in urls">{{ item}}   {{ url }}</div>
    <div v-for="url in urls" v-for="(item, index) in contents" >{{ item}}   {{ url }}</div>

<!--v-for 只能同时在 同一个元素 中出现一次-->

</div>
<script src="../../js/vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data(){
            return {
              contents: ["首页", "网页特效", "精品脚本", "JSP", "Spring", "PHP"],
              urls:["https://www.baidu.com","https://www.baidu.com","https://www.baidu.com","https://www.baidu.com","https://www.baidu.com","https://www.baidu.com"],
            }
        },
        methods:{

        }
    })

    app.mount("#app")
</script>
</body>
</html>